<template>
  <div>
    <h1 v-text="msg" id="t" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出h1DOM元素</button>
    <School ref="sch"></School>
    <School/>
    <School/>
    <School/>
  </div>
</template>

<script>
// 引入School组件
import School from './components/School'

export default {
    name:'App',
    components:{
        School
    },
    data() {
        return {
            msg:'Hello!'
        }
    },
    methods:{
        showDOM(){
            //原生获取DOM元素
            console.log(document.getElementById("t"))
            // 使用vue
            //this是vc
            //给哪个元素加了ref，ref就收集哪个元素的信息
            console.log(this.$refs.title) //真实DOM元素
            console.log(this.$refs.btn) //真实DOM元素
            console.log(this.$refs.sch) //拿到School组件的实例对象（vc）
        }
    }
}
</script>

<style>

</style>